<template>
    <div class="zc">
    <div class="big">
      <main :class="n">
        <!-- 注册 -->
        <div class="container_form container_signup">
          <div class="form" id="form1">
            <h2 class="form_title">注册账号</h2>
            <input
            v-model="name"
            @blur.capture="checkName"
              type="text"
              placeholder="用户名"
              class="input"
            />
            <span><img :src="require(`../assets/${url}`)" alt=""></span>
            <input
            v-model="upwd"
            @blur.capture="checkupwd"
              type="password"
              placeholder="密码"
              class="input"
            />
            <span><img :src="require(`../assets/${urlone}`)" alt="" class="one"></span>
            <input
            v-model="reupwd"
            @blur.capture="checkreupwd"
              type="password"
              placeholder="确认密码"
              class="input"
            />
            <span><img :src="require(`../assets/${urltwo}`)" alt="" class="two"></span>
            <input
            v-model="phone"
            @blur.capture="checkphone"
              type="text"
              placeholder="手机号"
              class="input"
            />
            <span><img :src="require(`../assets/${urlthree}`)" alt="" class="three"></span>
            <valid :value.sync="validCode"></valid>
            <button class="btn" @click="checkForm">点击注册</button>
          </div>
        </div>
        <!-- 登录 -->
        <div class="overlay_panel overlay_left">
          <button class="btn" id="signIn" @click="signIn">已有账号，前去登录</button>
        </div>
      </main>
    </div>
  </div>
</template>
<script>
import Valid from '../components/Valid.vue'
export default {
  components:{
    Valid
  },
  data(){
    return{
    n:'container right_panel_active',
    validCode:'validCode',
    name:'',
    upwd:'',
    reupwd:'',
    phone:'',
    chick:'',
    url:'must.png',
    urlone:'must.png',
    urltwo:'must.png',
    urlthree:'must.png'
    }
  },
  methods: {
    signIn(){
      this.$router.push('/login');
    },
    //注册验证
    checkName(){
      let reg=/^[\u4e00-\u9fa5_a-zA-Z0-9-]{1,16}$/;
      if(reg.test(this.name)){
        this.url='chenggong.png';
        return true;
      }else{
        this.url='shibai.png'
        return false;
      }
    },
    checkupwd(){
      let reg=/^\w{6,15}$/;
      if(reg.test(this.upwd)){
        this.urlone='chenggong.png';
        return true;
      }else{
        this.urlone='shibai.png'
        return false;
      }
    },
    checkreupwd(){
      let reg=/^\w{6,15}$/;
      if(reg.test(this.reupwd)&this.reupwd==this.upwd){
        this.urltwo='chenggong.png';
        return true;
      }else{
        this.urltwo='shibai.png'
        return false;
      }
    },
    checkphone(){
      let reg=/^[1][3,4,5,7,8][0-9]{9}$/;
      if(reg.test(this.phone)){
        this.urlthree='chenggong.png'
        return true;
      }else{
        this.urlthree='shibai.png'
        return false
      }
    },
    checkForm(){
      if(this.checkName() && this.checkupwd() &&
          this.checkphone()){
            //  console.log('验证成功，发送请求，执行注册业务...');
             this.axios.post('/register',`name=${this.name}&upwd=${this.upwd}&phone=${this.phone}`).then(result=>{
               console.log(result);
            // 判断并且提示是否注册成功
            if(result.data.code==200){
              alert('注册成功')
              this.$router.push('/login');
            }else if(result.data.code==201){
              alert('该用户已存在，请重新注册')
            }
             })
     }   
    },
  }
}
</script>
<style>
/* :root根伪类 --为自定义属性 方便我们重复使用同一个属性 自定义属性使用var(--white);进行调用 */
:root {
  /* 颜色 */
  --white: #e9e9e9;
  --gray: #333;
  --blue: #0367a6;
  --lightblue: #008997;
  /* 外边框圆角属性 */
  --button-radius: 0.7rem;
  /* 最大宽、高 的值*/
  --max-width: 758px;
  --max-height: 420px;
  /*  字体样式  */
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.zc .container img{
  width: 25px;
  position: absolute;
  right:6px;
  top: 68px;
}
.zc .container .one{
  top: 128px;
}
.zc .container .two{
  top: 190px;
}
.zc .container .three{
  top:256px;
}
.zc .big {
  background: var(--white) url("/img/11.jpg") no-repeat center fixed;
  background-size: cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.zc .container {
  background: var(--lightblue) url("/img/11.jpg") no-repeat center fixed;
  background-size: cover;
  border-radius: var(--button-radius);
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0.25), 0 0.7rem 0.7rem rgba(0, 0, 0.22);
  height: var(--max-height);
  max-width: var(--max-width);
  overflow: hidden;
  width: 100%;
  position: relative;
}
.zc .container .container_form {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.6s ease-in-out;
  transform: translateX(0);
  width: 50%;
}
.zc .container .container_form .form {
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  padding: 0 3rem;
  text-align: center;
}
.zc .container .container_form .form .form_title {
  font-weight: 300;
  margin: 0;
  margin-bottom: 1.25rem;
}
.zc .container .container_form .form .input {
  background-color: #fff;
  border: none;
  padding: 0.9rem 0.9rem;
  margin: 0.5rem 0;
  width: 100%;
}
.zc .container .container_form .form .btn {
  margin-top: 1.5rem;
}
.zc .container .container_signin {
  z-index: 3;
}
.zc .container .container_signin .link {
  color: var(--gray);
  font-size: 0.9rem;
  margin: 1.5rem 0;
  text-decoration: none;
}
.zc .container .container_signup {
  z-index: 2;
}
.zc .container .btn {
  background-color: var(--blue);
  background-image: linear-gradient(
    90deg,
    var(--blue) 0%,
    var(--lightblue) 74%
  );
  border-radius: 20px;
  border: 1px solid var(--blue);
  color: var(--white);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  padding: 0.9rem 4rem;
  text-transform: uppercase;
  transition: all 0.6s ease-in-out;
}
.zc .container .btn:active {
  transform: scale(0.95);
}
.zc .container .btn:focus {
  outline: none;
}
.zc .container .overlay_panel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 50%;
  position: absolute;
  right: 0;
  transition: all 0.6s ease-in-out;
  transform: translateX(0);
}
.zc .container .overlay_left {
  z-index: 2;
  transition: all 0.6s ease-in-out;
}
.zc .container .overlay_right {
  z-index: 3;
  transition: all 0.6s ease-in-out;
}
.zc .right_panel_active .container_form {
  transform: translateX(100%);
}
.zc .right_panel_active .container_signup {
  z-index: 3;
}
.zc .right_panel_active .container_signin {
  z-index: 2;
}
.zc .right_panel_active .overlay_panel {
  transform: translateX(-100%);
}
.zc .right_panel_active .overlay_left {
  z-index: 3;
}
.zc .right_panel_active .overlay_right {
  z-index: 2;
}
</style>